<template>
    <div class="box">
        <ul class="list">
            <li v-for="(item,index) in arr" :key="index">
                <div class="left">
                    <img :src="item.img" alt="">
                </div>
                <div class="right">
                    <span>{{item.title}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"Ranking",
    data(){
        return{
            arr:[
                {
                    img:"./img/pai1.png",
                    title:"Top500"
                },
                {
                    img:"./img/pai2.png",
                    title:"飙升榜"
                },
                 {
                    img:"./img/pai3.png",
                    title:"说唱先锋榜"
                },
                 {
                    img:"./img/pai4.png",
                    title:"抖音热歌榜"
                },
                 {
                    img:"./img/pai5.png",
                    title:"内地榜"
                },
                 {
                    img:"./img/pai6.png",
                    title:"快手热歌榜"
                },
                 {
                    img:"./img/pai7.png",
                    title:"电音榜"
                },
                 {
                    img:"./img/pai8.png",
                    title:"香港地区榜"
                },
                 {
                    img:"./img/pai9.png",
                    title:"民谣榜"
                },
                 {
                    img:"./img/pai10.png",
                    title:"国风新歌榜"
                }
            ]
        }
    }
}
</script>
<style scoped>
.box{
    width: 7.5rem;
    margin-top: 2.4rem;
}
.list{
    width: 100%;
}
.list li{
    width: 96%;
    height: 2.4rem;
    display: flex;
    margin-left: 4%;
}
.list li>.left{
    width: 30%;
    height: 80%;
}
.list li>.left>img{
    width: 100%;
    height: 100%;
}
.list li>.right{
    margin-left: 5%;
}
.list li>.right>span{
    display: inline-block;
    font-size: .4rem;
    margin-top:.2rem;
}
</style>

